<template>
  <div>
    自定义指令 <input type="text" v-focus v-if="flag">
    <button @click="flag = !flag">Change Flag</button>

    <p v-myshow="flag">Hello World</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false
    }
  },
  directives: {
    myshow: {
      bind(el) {
        console.log('bind myshow', el);
      },
      inserted(el, binding, vnode, oldVnode) {
        console.log('inserted myshow', el, binding, vnode, oldVnode);
      },
      update(el) {
        console.log('update myshow', el);
      }
    },
    focus: {
      bind() {
        console.log('bind focus');
      },
      inserted(el) {
        el.focus();
        console.log('inserted focus');
      },
      update() {
        console.log('update focus');
      },
      componentUpdate() {
        console.log('componentUpdate focus');
      },
      unbind() {
        console.log('unbind focus');
      }
    }
  }
}
</script>